<template>
  <el-radio-group v-model="comValue" :disabled="disabled">
    <el-radio v-for="item in options" :key="item.code" :value="item.code">
      {{ item.name }}
    </el-radio>
  </el-radio-group>
</template>

<script setup>
import { dictStore } from '@/pinia/modules/dict'
const dictStoreData = dictStore()
const emit = defineEmits(['update:modelValue', 'change'])
const props = defineProps({
  modelValue: {
    type: [String, Number],
    require: true,
    default: ''
  },
  dictCode: {
    require: true,
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'String'
  }
})
const options = computed(() => {
  return formatDictCode()
})
const comValue = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
    emit('change', val)
  }
})

const formatDictCode = () => {
  const code = props.dictCode
  const target = dictStoreData.dict?.find(item => item.code === code)
  // return target.children
  if (target && target.children) {
    return props.type === 'Number'
      ? target.children.map(item => {
          return {
            ...item,
            code: Number(item.code)
          }
        })
      : target.children
  } else {
    return []
  }
}
</script>

<style lang="scss" scoped>
.el-radio {
  // margin: 8px;
  // font-size: 14px;
  font-weight: normal;
}
:deep(.el-radio__label) {
  font-size: 14px;
}
</style>
